<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>JavaScript <span class="color_h1">使用误区</span></h1>

<p class="intro">本章节我们将讨论 JavaScript 的使用误区。</p>
<hr>
<h2>赋值运算符应用错误</h2>

<p>在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号
(==)。</p>

<p><strong>if</strong> 条件语句返回 <strong>false</strong> (是我们预期的)因为 x 不等于 10:</p>

<div class="example">
 <div class="example_code"><span style="color:black">
	<span style="color:mediumblue">var</span> x = <span style="color:red">0</span>;<br><span style="color:mediumblue">if</span> (x == <span style="color:red">10</span>) </span><button class="copy-code-button" type="button" data-clipboard-text="var x = 0;if (x == 10)"></button></div>
<br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_equal_1" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>
<p><strong>if</strong> 条件语句返回 <strong>true</strong> (不是我们预期的)因为条件语句执行为 x 赋值 10，10 为 true:</p>

<div class="example">
 <div class="example_code"><span style="color:black">
	<span style="color:mediumblue">var</span> x = <span style="color:red">0</span>;<br><span style="color:mediumblue">if</span> (x = <span style="color:red">10</span>)
</span><button class="copy-code-button" type="button" data-clipboard-text="var x = 0;if (x = 10)"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_equal_2" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>

<p><strong>if</strong> 条件语句返回 <strong>false</strong> (不是我们预期的)因为条件语句执行为 x 赋值 0，0 为 false:</p>

<div class="example">
 <div class="example_code"><span style="color:black">
	<span style="color:mediumblue">var</span> x = <span style="color:red">0</span>;<br><span style="color:mediumblue">if</span> (x = <span style="color:red">0</span>)
</span><button class="copy-code-button" type="button" data-clipboard-text="var x = 0;if (x = 0)"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_equal_3" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>

<table class="lamp"><tbody><tr>
<th style="width:34px">
<img decoding="async" src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>赋值语句返回变量的值。</td>
</tr></tbody></table>

<h2>比较运算符常见错误</h2>

<p>在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true：</p>
<div class="example">
 <div class="example_code"><span style="color:black">
	<span style="color:mediumblue">var</span> x = <span style="color:red">10</span>;<br><span style="color:mediumblue">var</span> y = <span style="color:brown">"10"</span>;<br><span style="color:mediumblue">if</span> (x == y) </span><button class="copy-code-button" type="button" data-clipboard-text="var x = 10;var y = &quot;10&quot;;if (x == y)"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_loose_1" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>

<p>在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下  if 条件语句返回 false：</p>

<div class="example">
 <div class="example_code"><span style="color:black">
	<span style="color:mediumblue">var</span> x = <span style="color:red">10</span>;<br><span style="color:mediumblue">var</span> y = <span style="color:brown">"10"</span>;<br><span style="color:mediumblue">if</span> (x === y) </span><button class="copy-code-button" type="button" data-clipboard-text="var x = 10;var y = &quot;10&quot;;if (x === y)"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_loose_2" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>
<p>这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较:</p>
<p>以下实例会执行 alert 弹窗：</p>
<div class="example">
 <div class="example_code"><span style="color:black">
	<span style="color:mediumblue">var</span> x = <span style="color:red">10</span>;<br><span style="color:mediumblue">switch</span>(x) {<br>&nbsp;&nbsp;&nbsp; <span style="color:mediumblue">case</span> <span style="color:red">10</span>: alert(<span style="color:brown">"Hello"</span>);<br><span style="color:red">
</span>    } </span><button class="copy-code-button" type="button" data-clipboard-text="var x = 10;switch(x) {&nbsp;&nbsp;&nbsp; case 10: alert(&quot;Hello&quot;);
    }"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_loose_3" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>

<p>以下实例由于类型不一致不会执行 alert 弹窗：</p>
<div class="example">
 <div class="example_code"><span style="color:black">
	<span style="color:mediumblue">var</span> x = <span style="color:red">10</span>;<br><span style="color:mediumblue">switch</span>(x) {<br>&nbsp;&nbsp;&nbsp; <span style="color:mediumblue">case</span> <span style="color:brown">"10"</span>: alert(<span style="color:brown">"Hello"</span>);<br><span style="color:red">
</span>    } </span><button class="copy-code-button" type="button" data-clipboard-text="var x = 10;switch(x) {&nbsp;&nbsp;&nbsp; case &quot;10&quot;: alert(&quot;Hello&quot;);
    }"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_loose_4" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>
<hr>
<h2>加法与连接注意事项</h2>
<p><strong>加法</strong>是两个<strong>数字</strong>相加。</p>
<p><strong>连接</strong>是两个<strong>字符串</strong>连接。</p>
<p>JavaScript 的加法和连接都使用 + 运算符。</p>
<p>接下来我们可以通过实例查看两个数字相加及数字与字符串连接的区别：</p>


<div class="example">
 <div class="example_code"><span style="color:black">
	<span style="color:mediumblue">var</span> x = <span style="color:red">10</span> + <span style="color:red">5</span>;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:green">// 
    x 的结果为 15<br></span><span style="color:mediumblue">var</span> x = <span style="color:red">10</span> + <span style="color:brown">"5"</span>;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:red">
</span>    <span style="color:green">// x 的结果为 "105"</span></span><button class="copy-code-button" type="button" data-clipboard-text="var x = 10 + 5;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 
    x 的结果为 15var x = 10 + &quot;5&quot;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    // x 的结果为 &quot;105&quot;"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_add_1" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>
<p>使用变量相加结果也不一致:</p>

<div class="example">
 <div class="example_code"><span style="color:black">
	<span style="color:mediumblue">var</span> x = <span style="color:red">10</span>;<br><span style="color:mediumblue">var</span> y = <span style="color:red">5</span>;<br><span style="color:mediumblue">var</span> z = x + y;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; <span style="color:red">
</span>    <span style="color:green">// z 的结果为 15<br></span><br><span style="color:mediumblue">var</span> x = <span style="color:red">10</span>;<br><span style="color:mediumblue">var</span> y = <span style="color:brown">"5"</span>;<br><span style="color:mediumblue">var</span> z = <span style="color:red">
</span>    x + y;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:red">
</span>    <span style="color:green">// z 的结果为 "105"</span></span><button class="copy-code-button" type="button" data-clipboard-text="var x = 10;var y = 5;var z = x + y;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 
    // z 的结果为 15var x = 10;var y = &quot;5&quot;;var z = 
    x + y;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    // z 的结果为 &quot;105&quot;"></button></div>
<br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_add_2" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>
<hr>
<h2>浮点型数据使用注意事项</h2>

<p>JavaScript 中的所有数据都是以 64 位<strong>浮点型数据(float)</strong> 来存储。</p>
<p>所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：</p>

<div class="example">
 <div class="example_code"><span style="color:black">
	<span style="color:mediumblue">var</span> x = <span style="color:red">0.1</span>;<br><span style="color:mediumblue">var</span> y = <span style="color:red">0.2</span>;<br><span style="color:mediumblue">var</span> z = x + y&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:red">
</span>    <span style="color:green">// z 的结果为 0.30000000000000004<br></span>if (z == <span style="color:red">0.3</span>)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:red">
</span>    <span style="color:green">// 返回 false</span></span><button class="copy-code-button" type="button" data-clipboard-text="var x = 0.1;var y = 0.2;var z = x + y&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    // z 的结果为 0.30000000000000004if (z == 0.3)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    // 返回 false"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_floats" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>
<p>为解决以上问题，可以用整数的乘除法来解决：</p>
<div class="example">
<h3>实例</h3>
<div class="example_code">
<span style="color:black">
<span style="color:mediumblue">var</span> z = (x * <span style="color:red">10</span> + y * <span style="color:red">10</span>) / <span style="color:red">10</span>;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:green">// z 的结果为 0.3</span></span><button class="copy-code-button" type="button" data-clipboard-text="var z = (x * 10 + y * 10) / 10;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // z 的结果为 0.3"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_floats_ok" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>
<p>更多内容可以参考：<a href="/w3cnote/js-precision-problem-and-solution.html" rel="noopener noreferrer" target="_blank">JavaScript 中精度问题以及解决方案</a></p>


<hr>
<h2>JavaScript 字符串分行</h2>
<p>JavaScript 允许我们在字符串中使用断行语句:</p>
<div class="example">
<h3>实例 1</h3>
<div class="example_code"><span style="color:black">
	<span style="color:mediumblue">var</span> x =<br><span style="color:brown">"Hello World!"</span>;</span><button class="copy-code-button" type="button" data-clipboard-text="var x =&quot;Hello World!&quot;;"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_string_1" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>
<p>但是，在字符串中直接使用回车换行是会报错的：</p>
<div class="example">
<h3>实例 2</h3>
<div class="example_code"><span style="color:black">
	<span style="color:mediumblue">var</span> x = <span style="color:brown">"Hello<br>World!"</span>;</span><button class="copy-code-button" type="button" data-clipboard-text="var x = &quot;HelloWorld!&quot;;"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_string_2" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>

</div>
<p>我们可以在选择开发工具或按下 F12 来查看错误信息：</p>
<p><img decoding="async" height="70%" src="//www.runoob.com/wp-content/uploads/2016/05/js-mistake12.jpg"></p>
<p>字符串断行需要使用反斜杠(\)，如下所示:</p>
<div class="example">
<h3>实例 3</h3>
<div class="example_code"><span style="color:black">
	<span style="color:mediumblue">var</span> x = <span style="color:brown">"Hello \<br>World!"</span>;</span><button class="copy-code-button" type="button" data-clipboard-text="var x = &quot;Hello \World!&quot;;"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_string_3" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>
<hr>
<h2>错误的使用分号</h2>
<p>以下实例中，if 语句失去方法体，原 if 语句的方法体作为独立的代码块被执行，导致错误的输出结果。</p>
<p>由于分号使用错误，if 语句中的代码块就一定会执行：</p>
<div class="example">
<div class="example_code"><span style="color:black"><span style="color:red">
</span> <span style="color:mediumblue">if</span> (x == <span style="color:red">19</span>);<br>{<br><span style="color:red">
	</span>&nbsp;&nbsp;&nbsp; <span style="color:green">// code block&nbsp; <br></span>}</span><button class="copy-code-button" type="button" data-clipboard-text="if (x == 19);{
	&nbsp;&nbsp;&nbsp; // code block&nbsp; }"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_semicolon" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>
<hr>
<h2>return 语句使用注意事项</h2>
<p>JavaScript 默认是在一行的末尾自动结束。</p>
<p>以下两个实例返回结果是一样的(一个有分号一个没有):</p>
<div class="example">
<h3>实例 1</h3>
<div class="example_code"><span style="color:black">
<span style="color:mediumblue">function</span> myFunction(a) {<br><span style="color:red">
	</span>&nbsp;&nbsp;&nbsp; 
	<span style="color:mediumblue">var</span> power = <span style="color:red">10</span>&nbsp; <br>&nbsp;&nbsp;&nbsp; <span style="color:mediumblue">return</span> a * power<br>}<br>
</span><button class="copy-code-button" type="button" data-clipboard-text="function myFunction(a) {
	&nbsp;&nbsp;&nbsp; 
	var power = 10&nbsp; &nbsp;&nbsp;&nbsp; return a * power}"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_return_1" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>

<div class="example">
<h3>实例 2</h3>
<div class="example_code"><span style="color:black">
<span style="color:mediumblue">function</span> myFunction(a) {<br><span style="color:red">
	</span>&nbsp;&nbsp;&nbsp; 
	<span style="color:mediumblue">var</span> power = <span style="color:red">10</span>;<br>&nbsp;&nbsp;&nbsp; <span style="color:mediumblue">return</span> a * power;<br>}<br>
</span><button class="copy-code-button" type="button" data-clipboard-text="function myFunction(a) {
	&nbsp;&nbsp;&nbsp; 
	var power = 10;&nbsp;&nbsp;&nbsp; return a * power;}"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_return_2" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div><p>JavaScript 也可以使用多行来表示一个语句，也就是说一个语句是可以分行的。</p>
<p>以下实例返回相同的结果:</p>

<div class="example">
<h3>实例 3</h3>
<div class="example_code"><span style="color:black">
<span style="color:mediumblue">function</span> myFunction(a) {<br><span style="color:red">
	</span>&nbsp;&nbsp;&nbsp; 
	<span style="color:mediumblue">var</span><br>&nbsp;&nbsp;&nbsp; power = <span style="color:red">10</span>;&nbsp; <br>&nbsp;&nbsp;&nbsp; <span style="color:mediumblue">return</span> a * power;<br>}</span><button class="copy-code-button" type="button" data-clipboard-text="function myFunction(a) {
	&nbsp;&nbsp;&nbsp; 
	var&nbsp;&nbsp;&nbsp; power = 10;&nbsp; &nbsp;&nbsp;&nbsp; return a * power;}"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_return_3" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div><p>但是，以下实例结果会返回 <b>undefined</b>：</p>
<div class="example">
<h3>实例 4</h3>
<div class="example_code"><span style="color:black">
<span style="color:mediumblue">function</span> myFunction(a) {<br><span style="color:red">
	</span>&nbsp;&nbsp;&nbsp; 
	<span style="color:mediumblue">var</span><br>&nbsp;&nbsp;&nbsp; power = <span style="color:red">10</span>;&nbsp; <br>&nbsp;&nbsp;&nbsp; <span style="color:mediumblue">return</span><br>&nbsp;&nbsp;&nbsp; a * power;<br>}</span><button class="copy-code-button" type="button" data-clipboard-text="function myFunction(a) {
	&nbsp;&nbsp;&nbsp; 
	var&nbsp;&nbsp;&nbsp; power = 10;&nbsp; &nbsp;&nbsp;&nbsp; return&nbsp;&nbsp;&nbsp; a * power;}"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_return_4" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>
<p>为什么会有这样的结果呢？因为在 JavaScript 中，实例 4 的代码与下面的代码一致：</p>
<pre class="prettyprint prettyprinted" style=""><span class="kwd">function</span><span class="pln"> myFunction</span><span class="pun">(</span><span class="pln">a</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln">
    power </span><span class="pun">=</span><span class="pln"> </span><span class="lit">10</span><span class="pun">;</span><span class="pln">  
    </span><span class="kwd">return</span><span class="pun">;</span><span class="pln">       </span><span class="com">// 分号结束，返回 undefined</span><span class="pln">
    a </span><span class="pun">*</span><span class="pln"> power</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text="function myFunction(a) {
    var
    power = 10;  
    return;       // 分号结束，返回 undefined
    a * power;
}
"></button></pre>

<h3>解析</h3>
<p>
如果是一个不完整的语句，如下所示:</p>
<pre class="prettyprint prettyprinted" style=""><span class="kwd">var</span><button class="copy-code-button" type="button" data-clipboard-text="var
"></button></pre>
<p>
JavaScript 将尝试读取第二行的语句：</p>
<pre class="prettyprint prettyprinted" style=""><span class="pln">power </span><span class="pun">=</span><span class="pln"> </span><span class="lit">10</span><span class="pun">;</span><button class="copy-code-button" type="button" data-clipboard-text="power = 10;
"></button></pre>
<p>
但是由于这样的语句是完整的: </p>
<pre class="prettyprint prettyprinted" style=""><span class="kwd">return</span><button class="copy-code-button" type="button" data-clipboard-text="return
"></button></pre>
<p>
JavaScript 将自动关闭语句:</p>
<pre class="prettyprint prettyprinted" style=""><span class="kwd">return</span><span class="pun">;</span><button class="copy-code-button" type="button" data-clipboard-text="return;
"></button></pre>
<p>
在 JavaScript 中，分号是可选的 。</p>
<p>由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。</p>
<table class="lamp"><tbody><tr>
<th style="width:34px">
<img decoding="async" src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>
<b>注意：</b>不用对 return 语句进行断行。
</td>
</tr></tbody></table>
<hr>
<h2>数组中使用名字来索引</h2>
<p>许多程序语言都允许使用名字来作为数组的索引。</p>
<p>使用名字来作为索引的数组称为关联数组(或哈希)。</p>
<p>JavaScript 不支持使用名字来索引数组，只允许使用数字索引。</p>
<div class="example">
<h3>实例</h3>
<div class="example_code"><span style="color:black">
<span style="color:mediumblue">var</span> person = [];<br>
person[<span style="color:red">0</span>] = <span style="color:brown">"John"</span>;<br>
person[<span style="color:red">1</span>] = <span style="color:brown">"Doe"</span>;<br>
person[<span style="color:red">2</span>] = <span style="color:red">46</span>;<br><span style="color:mediumblue">var</span> x = person.length;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:red">
</span> <span style="color:green">// person.length 返回 3<br></span><span style="color:mediumblue">var</span> y = person[<span style="color:red">0</span>];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:red">
</span> <span style="color:green">// person[0] 返回 "John"</span></span><button class="copy-code-button" type="button" data-clipboard-text="var person = [];
person[0] = &quot;John&quot;;
person[1] = &quot;Doe&quot;;
person[2] = 46;var x = person.length;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 // person.length 返回 3var y = person[0];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 // person[0] 返回 &quot;John&quot;"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_array_associative_1" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>
<p>在 JavaScript 中, <strong>对象</strong> 使用 <strong>名字作为索引</strong>。 </p>
<p>如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。</p>
<p>执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误:</p>

<div class="example">
<h3>实例</h3>
<div class="example_code"><span style="color:black">
<span style="color:mediumblue">var</span> person = [];<br>
person[<span style="color:brown">"firstName"</span>] = <span style="color:brown">"John"</span>;<br>
person[<span style="color:brown">"lastName"</span>] = <span style="color:brown">"Doe"</span>;<br>
person[<span style="color:brown">"age"</span>] = <span style="color:red">46</span>;<br><span style="color:mediumblue">var</span> x = person.length;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:green">// person.length 返回 0<br></span>var y = person[<span style="color:red">0</span>];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:red">
</span> <span style="color:green">// person[0] 返回 undefined</span></span><button class="copy-code-button" type="button" data-clipboard-text="var person = [];
person[&quot;firstName&quot;] = &quot;John&quot;;
person[&quot;lastName&quot;] = &quot;Doe&quot;;
person[&quot;age&quot;] = 46;var x = person.length;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // person.length 返回 0var y = person[0];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 // person[0] 返回 undefined"></button></div>
<br>
<a target="_blank" href="/try/try.php?filename=tryjs_array_associative_2" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>
<hr>
<h2>定义数组元素，最后不能添加逗号</h2>
<p>
数组最后一个值的后面添加逗号虽然语法没有问题，但是在不同的浏览器可能得到不同的结果。</p>
<pre class="prettyprint prettyprinted" style=""><span class="kwd">var</span><span class="pln"> colors </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">6</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">,];</span><span class="pln"> </span><span class="com">//这样数组的长度可能为3 也可能为4。</span><button class="copy-code-button" type="button" data-clipboard-text="var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。"></button></pre>
<p>正确的定义方式：</p>
<pre class="prettyprint prettyprinted" style=""><span class="pln">points </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="lit">40</span><span class="pun">,</span><span class="pln"> </span><span class="lit">100</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">25</span><span class="pun">,</span><span class="pln"> </span><span class="lit">10</span><span class="pun">];</span><button class="copy-code-button" type="button" data-clipboard-text="points = [40, 100, 1, 5, 25, 10];
"></button></pre><hr><h2>定义对象，最后不能添加逗号</h2>
<p>错误的定义方式：</p>
<pre class="prettyprint prettyprinted" style=""><span class="pln">websites </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">site</span><span class="pun">:</span><span class="str">"菜鸟教程"</span><span class="pun">,</span><span class="pln"> url</span><span class="pun">:</span><span class="str">"www.runoob.com"</span><span class="pun">,</span><span class="pln"> like</span><span class="pun">:</span><span class="lit">460</span><span class="pun">,}</span><button class="copy-code-button" type="button" data-clipboard-text="websites = {site:&quot;菜鸟教程&quot;, url:&quot;www.runoob.com&quot;, like:460,}
"></button></pre>
<p>正确的定义方式：</p>
<pre class="prettyprint prettyprinted" style=""><span class="pln">websites </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">site</span><span class="pun">:</span><span class="str">"菜鸟教程"</span><span class="pun">,</span><span class="pln"> url</span><span class="pun">:</span><span class="str">"www.runoob.com"</span><span class="pun">,</span><span class="pln"> like</span><span class="pun">:</span><span class="lit">460</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text="websites = {site:&quot;菜鸟教程&quot;, url:&quot;www.runoob.com&quot;, like:460}
"></button></pre>
<hr>
<h2>Undefined 不是 Null </h2>
<p>在 JavaScript 中, <strong>null</strong> 用于对象, <strong>undefined</strong> 用于变量，属性和方法。</p>
<p>对象只有被定义才有可能为 null，否则为 undefined。</p>
<p>如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。</p>

<p>错误的使用方式：</p>
<pre class="prettyprint prettyprinted" style=""><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">myObj </span><span class="pun">!==</span><span class="pln"> </span><span class="kwd">null</span><span class="pln"> </span><span class="pun">&amp;&amp;</span><span class="pln"> </span><span class="kwd">typeof</span><span class="pln"> myObj </span><span class="pun">!==</span><span class="pln"> </span><span class="str">"undefined"</span><span class="pun">)</span><span class="pln"> </span><button class="copy-code-button" type="button" data-clipboard-text="if (myObj !== null &amp;&amp; typeof myObj !== &quot;undefined&quot;) 
"></button></pre>
<p>正确的方式是我们需要先使用 typeof 来检测对象是否已定义：</p>
<pre class="prettyprint prettyprinted" style=""><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">typeof</span><span class="pln"> myObj </span><span class="pun">!==</span><span class="pln"> </span><span class="str">"undefined"</span><span class="pln"> </span><span class="pun">&amp;&amp;</span><span class="pln"> myObj </span><span class="pun">!==</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">)</span><span class="pln"> </span><button class="copy-code-button" type="button" data-clipboard-text="if (typeof myObj !== &quot;undefined&quot; &amp;&amp; myObj !== null) 
"></button></pre>
<hr>
<h2>程序块作用域</h2>
<p>在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。</p>
<p>以下代码的的变量 i 返回 10，而不是 undefined：</p>
<div class="example">
<h3>实例</h3>
<div class="example_code"><span style="color:black"><span style="color:red">
</span> <span style="color:mediumblue">for</span> (<span style="color:mediumblue">var</span> i = <span style="color:red">0</span>; i &lt; <span style="color:red">10</span>; i++) {<br><span style="color:red">
</span>&nbsp;&nbsp;&nbsp; <span style="color:green">// some code<br></span><span style="color:red">
</span> }<br><span style="color:red">
</span> <span style="color:mediumblue">return</span> i;</span><button class="copy-code-button" type="button" data-clipboard-text="for (var i = 0; i < 10; i++) {
&nbsp;&nbsp;&nbsp; // some code
 }
 return i;"></button></div><br>
<a target="_blank" href="/try/try.php?filename=tryjs_mistakes_scope" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</a>
</div>			<!-- 其他扩展 -->
						
			</div>
			
		</div>